<style></style>

<template>
  <h1>子</h1>

  <img :src="src" alt="" ref="img" />
</template>

<script setup lang="ts">
import { defineProps, useTemplateRef, ref, onMounted } from 'vue'
const props = defineProps(['dataSrc'])
const img = useTemplateRef('img')
const src = ref(
  'https://img0.baidu.com/it/u=2624383645,2470090579&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
)


function loadImage(){
  const newImage=new Image()
  newImage.src=props.dataSrc
  newImage.addEventListener('error',()=>{
    img.value!.src="https://robohash.org/123"
  })
}
onMounted(() => {
  if (img.value) {
    const observer = new IntersectionObserver(entries => {
      if (entries[0].intersectionRatio <= 0) return
      loadImage()
      img.value!.src = props['dataSrc']
      observer.unobserve(img.value!)
    })
    observer.observe(img.value)
  }
})
</script>
